<template>
  <div class="agency-detail-wrapper">
    <el-table :data="orderDetail" border :header-cell-style="rowClass" :cell-style="cellStyle">
      <el-table-column label="订单编号">
        <template slot-scope="scope">{{scope.row.order_number}}</template>
      </el-table-column>
      <el-table-column label="下单时间" width="155">
        <template slot-scope="scope">{{scope.row.agent_time | parseTime}}</template>
      </el-table-column>
      <el-table-column label="代理开始" width="155">
        <template
          slot-scope="scope"
          v-if="scope.row.start_time"
        >{{scope.row.start_time | parseTime}}</template>
        <template v-else>-</template>
      </el-table-column>
      <el-table-column label="代理结束" width="155">
        <template slot-scope="scope" v-if="scope.row.end_time">{{ scope.row.end_time | parseTime}}</template>
        <template v-else>-</template>
      </el-table-column>
      <el-table-column label="代理期限" width="90">
        <template slot-scope="scope">
          <span
            v-if="scope.row.agency_stage_max <= '0'"
          >{{scope.row.agent_date ? scope.row.agent_date + '个月' : '无限期'}}</span>
          <span v-else>{{scope.row.agent_date +'~'+ scope.row.agency_stage_max +'个月'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="规格属性" width="150">
        <template slot-scope="scope">{{scope.row.product_sku}}</template>
      </el-table-column>
      <el-table-column label="代理份数" width="90">
        <template slot-scope="scope">{{scope.row.copies}}份</template>
      </el-table-column>
      <el-table-column prop="order_number" label="已付订金" width="110">
        <template slot-scope="scope">{{scope.row.deposit_paid + '元'}}</template>
      </el-table-column>
      <el-table-column label="合同" width="90">
        <template slot-scope="scope">
          <p v-if="scope.row.contract_id">
            <span class="previewContract" @click="_previewContract(scope.row.contract_id)">查看合同</span>
          </p>
          <p v-if="scope.row.contract_id">
            <span class="previewContract" @click="_downloadContract(scope.row.contract_id)">下载合同</span>
          </p>
          <p v-if="!scope.row.contract_id">
            <span class="red-tx">未签署</span>
          </p>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      class="back-list"
      :data="agentList.list"
      border
      :header-cell-style="rowClass"
      :cell-style="cellStyle"
    >
      <el-table-column prop="date_time" label="时间">
        <template
          slot-scope="scope"
        >{{scope.row.date_time | parseTime(scope.row.date_time,'y-m-d')}}</template>
      </el-table-column>
      <el-table-column prop="stock" label="说明"></el-table-column>
      <el-table-column prop="status_msg" label="状态"></el-table-column>
    </el-table>
    <el-row
      v-show="orderData.start_status == 2 || orderData.start_status == 3  && agentList.list"
      class="agent-total"
    >
      合计：
      <span
        class="comein"
        v-if="!isNaN(receivableNum) && (orderData.agency_stage_max <= 0 || !orderData.agency_stage_max)"
      >
        应收
        <span class="count">{{receivableNum.toFixed(2) +'元'}}</span>
      </span>
      <span
        class="comein"
        v-show="agentList.total_income_money || agentList.total_income_money == 0"
      >
        已收
        <span class="count">{{agentList.total_income_money +'元'}}</span>
      </span>
      <span
        class="uncomein"
        v-show="agentList.total_ready_money || agentList.total_ready_money == 0"
      >
        待收
        <span class="count">{{agentList.total_ready_money +'元'}}</span>
      </span>
    </el-row>
  </div>
</template>
<script>
import { previewContract, downloadContract } from "@/api/mycontract";
export default {
  props: {
    orderDetail: {
      type: Array,
    },
    agentList: {
      type: Object,
    },
    orderData: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  created() {
    console.log("orderData", this.orderData);
    console.log("代理期限", this.orderDetail);
    console.log("资金数据", this.agentList);
  },
  computed: {
    receivableNum: function () {
      return (
        this.agentList.total_income_money + this.agentList.total_ready_money
      );
    },
  },
  methods: {
    rowClass() {
      return "background:rgba(240,249,252,1);font-size:14px;color:#999;font-weight:400;text-align:center;height:40px;padding: 0;";
    },
    cellStyle() {
      return "height:60px;font-size:14px;color:#333;text-align:center;";
    },
    // 查看合同
    _previewContract(id) {
      let params = {
        contract_id: id,
      };
      previewContract(params).then((res) => {
        console.log(res);
        if (res.code == 1 && res.data.url) {
          window.open(res.data.url);
          console.log(res.data.url);
        } else {
          this.$message.error(res.msg || "请求失败");
        }
      });
    },
    // 下载合同
    _downloadContract(id) {
      let params = {
        contract_id: id,
      };
      downloadContract(params).then((res) => {
        console.log("下载合同res", res);
        let blob = new Blob([res], { type: "application/pdf" });
        let objectUrl = window.URL.createObjectURL(blob);
        const fname = "代理合同";
        const contractLink = document.createElement("a");
        contractLink.style.display = "none";
        contractLink.href = objectUrl;
        contractLink.setAttribute("download", fname);
        document.body.appendChild(contractLink);
        contractLink.click();
        window.URL.revokeObjectURL(contractLink.href); // 释放URL对象
        document.body.removeChild(contractLink);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.back-list {
  margin-top: 20px;
}
.agent-total {
  text-align: right;
  margin-top: 20px;
  height: 48px;
  line-height: 48px;
  background: #fffaf7;
  color: #999;
  font-size: 14px;
  padding: 0 30px;
  .comein {
    color: #333;
    margin-left: 20px;
    .count {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
  }
  .uncomein {
    color: #333;
    margin-left: 20px;
    .count {
      font-size: 18px;
      font-weight: bold;
      color: #fa4e33;
    }
  }
}
.previewContract {
  cursor: pointer;
  color: #999;
  text-decoration: underline;
  &:hover {
    color: #ff7f5b;
  }
}
.red-tx {
  color: #ccc;
}
</style>
